<template>
  <div id="max">
    <div class="login_index">
      <div class="logo">
        <img
          src="https://bpic.588ku.com/ad_diversion/21/08/12/6f048a01b3823422dcf83aaba5c43c8e.png"
          alt=""
        />
      </div>
      <div class="table_index">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="name" style="margin-bottom: 0px">
            <el-input
              style="margin-top: 100px"
              class="el_input"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名"
              v-model="ruleForm.name"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password" style="margin-bottom: 0px">
            <el-input
              class="el_input"
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              v-model="ruleForm.password"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="table_btn">
          <el-button type="primary" @click="btn_login">登录</el-button>
          <el-button>重置</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        name: "",
        password: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 9, message: "长度在 6 到 9 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    btn_login() {
      this.$refs.ruleForm.validate((val) => {
        if (val) {
          this.axios
            .post("login", {
              username: this.ruleForm.name,
              password: this.ruleForm.password,
            })
            .then(
              (res) => {
                console.log(res);
                if (res.data.meta.status == 200) {
                  window.localStorage.setItem("token", res.data.data.token);
                  this.$message({
                    message: "恭喜你，登录成功！",
                    type: "success",
                    center: "true",
                  });
                  this.$router.push("/interface");
                } else if (res.data.meta.msg == "密码错误") {
                  this.$message({
                    message: "密码错误！",
                    type: "error",
                    center: "true",
                  });
                } else {
                  this.$message({
                    message: "用户名不存在！",
                    type: "warning",
                    center: "true",
                  });
                }
              },
              (err) => {
                this.$message({
                  message: "系统错误！",
                  type: "error",
                  center: "true",
                });
              }
            );
        }
      });
    },
  },
};
</script>

<style lang='less' scope>
#max {
  width: 100%;
  height: 750px;
  background-color: teal;
  display: flex;
  justify-content: center;
  align-items: center;
  .login_index {
    width: 700px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .logo {
      width: 100px;
      height: 100px;
      position: absolute;
      border-radius: 50%;
      top: 25px;
      box-sizing: border-box;
      img {
        width: 100px;
        height: 100px;
        box-sizing: border-box;
        border-radius: 50%;
      }
      img:hover {
        box-shadow: 0px 0px 12px 10px #ae63a4;
      }
    }
    .table_index {
      width: 500px;
      height: 350px;
      background: white;
      border-radius: 10px;
      .el-form-item__error {
        left: 52px;
      }
      .el_input {
        width: 400px;
        margin-top: 30px;
        margin-left: 50px;
      }
      .table_btn {
        width: 160px;
        margin-left: 298px;
        margin-top: 40px;
      }
    }
  }
}
</style>